<template>
  <!--  布防预警管理-->
  <div class="page">

    <el-row>
      <!--      查询-->
      <el-col :span="4">
        <div style="height: 50vh;">
          <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                             @change="selectOrgHandel">
          </organization-tree>
        </div>
        <div style="height: 50vh;">
          <road-tree v-model="roadTree" ref="roadTree" :changeOnSelect='true' placeholder="选择管养单位"
                     @change="selectOrgHandel1">
          </road-tree>
        </div>

      </el-col>
      <el-col :span="20">
        <!--        时间筛查-->
        <div style="margin-left: 20px;width: 500px;display: inline-block">
          <el-date-picker
            style="width:100%;min-width:240px;height: 40px"
            size="small"
            value-format="timestamp"
            v-model="timerArray"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="预警开始日期"
            end-placeholder="预警结束日期" :clearable="false">
          </el-date-picker>
        </div>
        <el-select v-model="form.status" clearable filterable placeholder="查阅状态" @change="changeOptions($event)"
                   @clear="form.page=1;queryList()"
                   class="search-item-width info" style="margin-left: 20px;margin-top: 10px">
          <el-option
            v-for="item in isStatus"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button style="margin-left: 20px;margin-top: 10px" class="common_btn-defalut" icon="el-icon-search"
                   @click="search">搜索
        </el-button>
        <div class="page_main">
          <!-- table -->
          <div class="common_btnBox">
            <i class="iconfont iconzongshu icon-size"></i>
            总数：{{form.total}}
          </div>
          <el-table
            :data="tableList"
            border>
            <el-table-column prop="roadName" label="路线" min-width="180" align="center"></el-table-column>
            <el-table-column prop="roadSectionName" label="区间" width="180" align="center"></el-table-column>
            <el-table-column prop="arrangementName" label="布控点" min-width="140" align="center"></el-table-column>
            <el-table-column prop="status" label="查阅状态" align="center" width="110">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status==0" type="danger">未查阅</el-tag>
                <el-tag v-if="scope.row.status==1">已查阅</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="预警时间" width="170" align="center">
              <template slot-scope="scope">{{scope.row.createTime | formatTimer}}
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="处理时间" width="170" align="center">
              <template v-if="scope.row.status == 1" slot-scope="scope">
                {{scope.row.updateTime | formatTimer}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="center">
              <template slot-scope="scope">
                <template v-if="scope.row.status == 0">
                  <el-button size="mini" round type="text" style="color: #1990FE;"
                             @click="updateStatus(scope.row)">查阅并推送预警
                  </el-button>

                  <el-button size="mini" round type="text" style="color: #e63333"
                             @click="insertReportInfo(scope.row)">查阅并填写报告
                  </el-button>
                </template>
                <template v-else>
                  <el-button v-if="scope.row.warningPushId" type="text" size="mini" round s
                             @click="checkAlertInfo(scope.row.warningPushId)">查看推送详情
                  </el-button>
                  <el-button v-else size="mini" round type="text"
                             @click="jumpMenu(scope.row)" style="color: #228AF5">短信推送预警
                  </el-button>

                  <el-button v-if="scope.row.reportId" type="text" size="mini" round
                             @click="checkReportInfo(scope.row.reportId)"> 查看报告详情
                  </el-button>
                  <el-button v-else size="mini" round type="text"
                             @click="insertReportInfo(scope.row)" style="color: #00aa09">报告填写
                  </el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-size="form.pageSize"
               :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
            :total="form.total">
          </el-pagination>
          <el-dialog
            title="推送报警详情"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="500px">
            <el-card shadow="hover">
              <el-row>
                <el-col :span="24">
                  <div class="row-detail">
                    <div class="row-detail-item">
                      <label class="info-label">报警时间:</label>
                      <div class="info-content">{{alertDetails.alertTime | formatTimer}}</div>
                    </div>
                    <div class="row-detail-item">
                      <label class="info-label">报警位置信息:</label>
                      <div class="info-content"> {{alertDetails.locationInfo}}
                      </div>
                    </div>
                    <div class="row-detail-item">
                      <label class="info-label">报警接收电话:</label>
                      <div class="info-content"> {{alertDetails.pushNumber}}
                      </div>
                    </div>
                  </div>
                  <el-row>
                    <el-col>
                      <label class="info-label row-detail" style="margin-left: 2px">报警图片:</label>
                      <hr/>
                    </el-col>
                    <el-col>
                      <el-carousel height="300px" arrow="always" :autoplay="false">
                        <el-carousel-item v-for="url in  alertDetails.photoUrlList" :key="url">
                          <img style="width: 500px;height:300px" :src="url"/>
                        </el-carousel-item>
                      </el-carousel>
                    </el-col>
                  </el-row>

                </el-col>
              </el-row>
            </el-card>
          </el-dialog>

          <el-drawer
            title="事故报告" size="4           0%"
            :close-on-click-modal="false"
            :visible.sync="detailsVisible"
            custom-class="dialog-dark-big high-way-details">
            <el-form inline label-position="center" :rules="rules" label-width="150px" :model="reportInfo"
                     class="tabForm"
                     ref="reportInfo">
              <el-tabs type="border-card">
                <el-tab-pane label="当事人基本情况">
                  <el-card shadow="always" style="display: flex;justify-content: center;">
                    <el-form-item label="姓名" prop="personName" style="width: 48%;">
                      <el-input v-model="reportInfo.personName" maxlength="2" style="width:180px" disabled
                                clearable placeholder="请填写姓名" auto-complete='personAge'></el-input>
                    </el-form-item>

                    <el-form-item label="性别" prop="personGender" style="width: 48%;">
                      <el-select v-model="reportInfo.personGender"
                                 clearable
                                 placeholder="请选择" style="width:180px" disabled>
                        <el-option
                          v-for="item in genderList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>


                    <el-form-item label="年龄" prop="personAge" style="width: 48%;">
                      <el-input v-model="reportInfo.personAge" maxlength="2" style="width:180px" disabled
                                clearable placeholder="" auto-complete='personAge'></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="国家/地区" prop="personNationality">
                      <el-select v-model="reportInfo.personNationality"
                                 clearable disabled
                                 placeholder="请选择国家/地区" style="width:180px">
                        <el-option
                          v-for="item in personNationalityList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="民族" prop="personEthnic">
                      <el-select v-model="reportInfo.personEthnic"
                                 clearable disabled
                                 placeholder="请选择" style="width:180px">
                        <el-option
                          v-for="item in personEthnicList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="手机号" prop="personPhone">
                      <el-input v-model="reportInfo.personPhone" clearable placeholder="请填写" disabled
                                style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="证件号码" prop="personIdentificationNo"
                                  class="identification-no">
                      <el-input v-model="reportInfo.personIdentificationNo" clearable style="width:180px" disabled
                                placeholder="请填写证件号码"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="驾照类型" prop="personDrivingLicenseType"
                                  class="personDriving-licenstype-no">
                      <el-select v-model="reportInfo.personDrivingLicenseType"
                                 clearable disabled
                                 placeholder="请选择" style="width:180px">
                        <el-option
                          v-for="item in personDrivingLicenseTypeList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <div class="uploadPhoto">
                      <el-form-item label="相关照片" prop="personPhoto">
                        <upload-img v-model="reportInfo.personPhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </el-form-item>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="车辆基本情况">
                  <el-card shadow="hover">
                    <el-form-item label="车牌号" prop="carNumber">
                      <el-input v-model="reportInfo.carNumber" placeholder="请输入车牌号" clearable disabled
                                class="dialog-input" style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="车型" prop="carType">
                      <el-select v-model="reportInfo.carType"
                                 clearable disabled
                                 placeholder="请选择车型" style="width:180px">
                        <el-option
                          v-for="item in carTypeList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="车主" prop="carMaster">
                      <el-input v-model="reportInfo.carMaster" placeholder="请输入车主姓名" clearable style="width:180px"
                                disabled
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="核定载人数" prop="carPassengerNumber">
                      <el-input v-model="reportInfo.carPassengerNumber" clearable style="width:180px" disabled
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="核定载质量" prop="carPassengerQuality">
                      <el-input v-model="reportInfo.carPassengerQuality" clearable style="width:180px" disabled
                                class="dialog-input">
                        <template slot="append">kg</template>
                      </el-input>

                    </el-form-item>
                    <div class="uploadPhoto">
                      <el-form-item label="相关照片" prop="carPhoto">
                        <upload-img v-model="reportInfo.carPhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </el-form-item>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="道路和交通环境基本情况">
                  <el-card shadow="hover" class="report-location" style="text-align: left">
                    <el-form-item label="事故位置信息" prop="accidentLocation" class="location-info"
                                  style="display: flex;justify-content: flex-start">
                      <el-select v-model="reportInfo.roadId" disabled
                                 class="search-item-width info" style="width: 250px;margin-right: 15px">
                        <el-option
                          v-for="item in highWayNameList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                      <el-select v-model="reportInfo.roadSectionId" disabled
                                 class="search-item-width info" style="width:250px">
                        <el-option
                          v-for="item in roadSectionNameList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>

                      </el-select>

                    </el-form-item>
                    <el-form-item label="布控点ID" prop="arrangementId" class="location-info2">
                      <el-input v-model="reportInfo.arrangementId" disabled
                                placeholder=""
                                clearable
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="现场天气情况" prop="weather" class="location-info2">
                      <el-select v-model.trim="reportInfo.weather"
                                 clearable
                                 placeholder="请选择天气" style="width: 180px">
                        <el-option
                          v-for="item in weatherList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="详细情况描述" prop="envDetails">
                      <el-input v-model="reportInfo.envDetails" type="textarea" :autosize="{ minRows: 4}"
                                placeholder="详细情况描述"
                                clearable disabled
                                class="dialog-input"></el-input>
                    </el-form-item>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="事故造成的人员伤亡和直接经济损失">
                  <el-card shadow="hover" class="report-textarea">
                    <el-form-item label="伤亡人数" prop="deathNumber" class="number-input">
                      <el-input v-model="reportInfo.deathNumber" disabled
                                class="dialog-input number-input" style="width:180px">
                        <template slot="append">死</template>
                      </el-input>

                      <el-input v-model="reportInfo.injuredNumber" disabled
                                class="dialog-input number-input" style="width:180px">
                        <template slot="append">伤</template>
                      </el-input>

                    </el-form-item>
                    <el-form-item label="详细情况描述" prop="casualtiesDetails" class="number-textarea">
                      <el-input v-model="reportInfo.casualtiesDetails" type="textarea" :autosize="{ minRows: 4}"
                                placeholder="事故造成的人员伤亡和直接经济损失描述"
                                clearable disabled
                                class="dialog-input"></el-input>
                    </el-form-item>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="事故发生经过">
                  <el-card shadow="hover" class="report-textarea">
                    <el-input v-model="reportInfo.accidentDetails" type="textarea" :autosize="{ minRows: 4}"
                              placeholder="事故经过描述"
                              clearable disabled
                              class="dialog-input"></el-input>
                    <div class="uploadPhoto">
                      <p style="margin: 20px 0 10px">现场照片：</p>
                      <div class="uploadPhoto">
                        <upload-img v-model="reportInfo.scenePhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </div>
                    </div>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-form>
          </el-drawer>
          <el-dialog
            title="新增事故报告"
            :close-on-click-modal="false"
            :visible.sync="formVisible"
            width="800px"
            class="report-class">
            <el-form inline label-position="center" :rules="rules" label-width="150px" :model="reportInfo"
                     class="tabForm"
                     ref="reportInfo">
              <el-tabs type="border-card">
                <el-tab-pane label="当事人基本情况">
                  <el-card shadow="always" style="display: flex;justify-content: center;">
                    <div style="width: 100%;height: 80px;display: flex;justify-content: center;text-align: left;">
                      <el-form-item label="姓名" prop="personName" style="width: 48%;text-align: center">
                        <el-input v-model="reportInfo.personName" style="width:180px"
                                  clearable placeholder="请填写姓名" auto-complete='personName'></el-input>
                      </el-form-item>
                      <el-form-item label="性别" prop="personGender" style="width: 48%;">
                        <el-select v-model="reportInfo.personGender"
                                   clearable
                                   placeholder="请选择" style="width:180px">
                          <el-option
                            v-for="item in genderList"
                            :key="item.code" :label="item.name" :value="item.code">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </div>

                    <el-form-item label="年龄" prop="personAge" style="width: 48%;">
                      <el-input v-model="reportInfo.personAge" maxlength="2" style="width:180px"
                                clearable placeholder="" auto-complete='personAge'></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="国家/地区" prop="personNationality">
                      <el-select v-model="reportInfo.personNationality"
                                 clearable
                                 placeholder="请选择国家/地区" style="width:180px">
                        <el-option
                          v-for="item in personNationalityList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="民族" prop="personEthnic">
                      <el-select v-model="reportInfo.personEthnic"
                                 clearable
                                 placeholder="请选择" style="width:180px">
                        <el-option
                          v-for="item in personEthnicList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="手机号" prop="personPhone">
                      <el-input v-model="reportInfo.personPhone" clearable placeholder="请填写"
                                style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="证件号码" prop="personIdentificationNo"
                                  class="identification-no">
                      <el-input v-model="reportInfo.personIdentificationNo" clearable style="width:180px"
                                placeholder="请填写证件号码"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 48%;" label="驾照类型" prop="personDrivingLicenseType"
                                  class="personDriving-licenstype-no">
                      <el-select v-model="reportInfo.personDrivingLicenseType"
                                 clearable
                                 placeholder="请选择" style="width:180px">
                        <el-option
                          v-for="item in personDrivingLicenseTypeList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <div class="uploadPhoto">
                      <el-form-item label="相关照片" prop="personPhoto">
                        <upload-img v-model="reportInfo.personPhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </el-form-item>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="车辆基本情况">
                  <el-card shadow="hover">
                    <el-form-item label="车牌号" prop="carNumber">
                      <el-input v-model="reportInfo.carNumber" placeholder="请输入车牌号" clearable
                                class="dialog-input" style="width:180px"></el-input>
                    </el-form-item>
                    <el-form-item label="车型" prop="carType">
                      <el-select v-model="reportInfo.carType"
                                 clearable
                                 placeholder="请选择车型" style="width:180px">
                        <el-option
                          v-for="item in carTypeList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="车主" prop="carMaster">
                      <el-input v-model="reportInfo.carMaster" placeholder="请输入车主姓名" clearable style="width:180px"
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="核定载人数" prop="carPassengerNumber">
                      <el-input v-model="reportInfo.carPassengerNumber" clearable style="width:180px"
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="核定载质量" prop="carPassengerQuality">
                      <el-input v-model="reportInfo.carPassengerQuality" clearable style="width:180px"
                                class="dialog-input"></el-input>
                      Kg
                    </el-form-item>
                    <div class="uploadPhoto">
                      <el-form-item label="相关照片" prop="carPhoto">
                        <upload-img v-model="reportInfo.carPhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </el-form-item>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="道路和交通环境基本情况">
                  <el-card shadow="hover" class="report-location" style="text-align: left">
                    <el-form-item label="事故位置信息" prop="accidentLocation" class="location-info"
                                  style="display: flex;justify-content: flex-start">
                      <el-select v-model="reportInfo.roadId" disabled
                                 class="search-item-width info" style="width: 250px;margin-right: 15px">
                        <el-option
                          v-for="item in highWayNameList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                      <el-select v-model="reportInfo.roadSectionId" disabled
                                 class="search-item-width info" style="width:250px">
                        <el-option
                          v-for="item in roadSectionNameList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>

                      </el-select>

                    </el-form-item>
                    <el-form-item label="布控点ID" prop="arrangementId" class="location-info2">
                      <el-input v-model="reportInfo.arrangementId" disabled
                                placeholder=""
                                clearable
                                class="dialog-input"></el-input>
                    </el-form-item>
                    <el-form-item label="现场天气情况" prop="weather" class="location-info2">
                      <el-select v-model.trim="reportInfo.weather"
                                 clearable
                                 placeholder="请选择天气" style="width: 180px">
                        <el-option
                          v-for="item in weatherList"
                          :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="详细情况描述" prop="envDetails">
                      <el-input v-model="reportInfo.envDetails" type="textarea" :autosize="{ minRows: 4}"
                                placeholder="详细情况描述"
                                clearable
                                class="dialog-input"></el-input>
                    </el-form-item>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="事故造成的人员伤亡和直接经济损失">
                  <el-card shadow="hover" class="report-textarea">
                    <el-form-item label="伤亡人数" prop="deathNumber" class="number-input">
                      <el-input v-model="reportInfo.deathNumber"
                                class="dialog-input number-input" style="width:180px"></el-input>
                      死
                      <el-input v-model="reportInfo.injuredNumber"
                                class="dialog-input number-input" style="width:180px"></el-input>
                      伤
                    </el-form-item>
                    <el-form-item label="详细情况描述" prop="casualtiesDetails" class="number-textarea">
                      <el-input v-model="reportInfo.casualtiesDetails" type="textarea" :autosize="{ minRows: 4}"
                                placeholder="事故造成的人员伤亡和直接经济损失描述"
                                clearable
                                class="dialog-input"></el-input>
                    </el-form-item>
                  </el-card>
                </el-tab-pane>

                <el-tab-pane label="事故发生经过">
                  <el-card shadow="hover" class="report-textarea">
                    <el-input v-model="reportInfo.accidentDetails" type="textarea" :autosize="{ minRows: 4}"
                              placeholder="事故经过描述"
                              clearable
                              class="dialog-input"></el-input>
                    <div class="uploadPhoto">
                      <p style="margin: 20px 0 10px">现场照片：</p>
                      <div class="uploadPhoto">
                        <upload-img v-model="reportInfo.scenePhoto" :limit="5" :size-limit="4"
                                    ref="uploadPic"></upload-img>
                      </div>
                    </div>
                  </el-card>
                </el-tab-pane>

              </el-tabs>


            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="formVisible = false">取消</el-button>
              <el-button type="primary" @click="validateForm" style="background: #1990FE">提交</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>

  </div>
</template>

<script>
import OrganizationTree from '@/components/organization-tree/all1'
import roadTree from '@/components/road-tree/all1'
import constUrl from '@/services/env'
import {getRoadSectionSelectList, getRoadSelectList,} from '@/services/model/road-mgmt'
import PictureViewer from '@/components/picture-viewer'
import UploadImg from '@/components/upload-img'
import {
  getEarlyWarningList,
  getPushRecord,
  getAccidentReport,
  updateStatus,
  add
} from '@/services/model/early-warning'
import {getSensorSelectList} from '@/services/model/equip'
import Enums from '@/utils/enums'
import Format from '@/utils/format'
import {getEarlywarningList, getArrangementList} from '@/services/model/road-control'
// form表单校验规则
const RULES = {
  personName: {required: true, message: '请输入当事人名称', trigger: 'change'},
  personAge: {required: true, message: '请输入当事人年龄', trigger: 'change'},
  personGender: {required: true, message: '请选择性别', trigger: 'change'},
  personEthnic: {required: true, message: '请选择民族', trigger: 'change'},
  personNationality: {required: true, message: '请选择国籍', trigger: 'change'},
  personIdentificationNo: {required: true, message: '请输入证件号码', trigger: 'change'},
  carNumber: {required: true, message: '请输入车牌号', trigger: 'change'},
  carType: {required: true, message: '请选择车辆类型', trigger: 'change'},
  personDrivingLicenseType: {required: true, message: '请选择驾照等级', trigger: 'change'},
  carMaster: {required: true, message: '请输入车主姓名', trigger: 'change'},
  weather: {required: true, message: '请选择天气', trigger: 'change'},
}
const timer = 30 * 24 * 3600 * 1000
export default {
  mixins:[Enums],
  components: {
    UploadImg, PictureViewer, OrganizationTree,
    roadTree
  },
  data() {
    return {
      deptTreeId: '',
      //存放时间
      form1: {
        startCreateTime: Date.parse(new Date()) - timer,
        endCreateTime: Date.parse(new Date()),
      },
      value2: '',
      //查阅
      isStatus: [{
        id: 0, name: '未查阅'
      }, {
        id: 1, name: '已查阅'
      }],
      // 时间选择器配置
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }],
        onPick: obj => {
          this.picerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if (this.picerMinDate) {
            // 最多可选3个月
            const LIMIT = 90 * 24 * 60 * 60 * 1000
            const maxTime = this.picerMinDate + LIMIT
            const minTime = this.picerMinDate - LIMIT
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        }
      },
      // 列表查询参数
      searchParams: {},
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      constUrl,
      dataLists: [],
      //管养单位返回数据
      deptTree: {
        deptTreeId: '',
      },
      //布控点返回数据
      roadTree: {
        roadTreeId: '',
      },
      roadSectionIdSearch: '',//路段id搜索
      roadIdSearch: '',//公路id搜索
      highWayNameList: [],
      roadSectionNameList: [],
      roadId: '',
      genderList: [],
      personNationalityList: [],
      personEthnicList: [],
      personDrivingLicenseTypeList: [],
      carTypeList: [],
      weatherList: [],
      highwaySelectList: [],
      roadSectionSelectList: [],
      deviceSelectList: [],
      dialogVisible: false,
      detailsVisible: false,
      formVisible: false,
      alertDetails: {
        alertTime: '',
        locationInfo: "",
        photoUrlList: [],
        pushNumber: "",
      },
      total: 0,
      form: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      rules: RULES, // 表单校验的规则
      tableList: [],
      currentRow: {}, // 新增数据,
      photoList: {
        personPhoto: [],
        carPhoto: [],
        scenePhoto: [],
      },
      reportInfo: {
        arrangementId: '',//布控点id
        personName: "",//姓名
        personAge: "",//年龄
        personGender: '',//性别
        personEthnic: "",//民族
        personNationality: "",//国家
        personPhone: "",//电话
        personIdentificationNo: "",//身份证号
        personPhoto: [],//人员照片
        personDrivingLicenseType: "",//驾照类型
        carNumber: "",//汽车牌照
        carType: "",//汽车型号
        carMaster: "",//车主
        carPassengerNumber: "",//汽车核载人数
        carPassengerQuality: "",//汽车核载质量
        carPhoto: [],//汽车相关照片
        accidentLocation: "",//事故位置信息
        weather: "",//现场天气情况
        envDetails: "",//现场环境详情描述
        deathNumber: "",//死亡人数
        injuredNumber: "",//受伤人数
        casualtiesDetails: "",//伤亡详情描述
        accidentDetails: "",//事故经过详情
        scenePhoto: [],//现场图片
        earlyWarningId: "",//预警数据iD
        dialogVisible: false,
        weather: "",
        deptTreeId: '',
        roadSectionId: '',

      },
    }
  },
  computed: {
    // 时间筛选
    timerArray: {
      get() {
        return [this.form1.startCreateTime, this.form1.endCreateTime]
      },
      set([startTimer, endTimer]) {
        this.form1.startCreateTime = startTimer
        this.form1.endCreateTime = endTimer
      }
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy-MM-dd hh:mm:ss')
    }
  },
  methods: {
    // 搜索
    search() {
      if (this.form.status !== 0 && this.form.status !== 1) {
        this.form.startCreateTime = this.form1.startCreateTime
        this.form.endCreateTime = this.form1.endCreateTime
        this.form.status = null
        this.queryList()
      } else {
        this.form.startCreateTime = null
        this.form.endCreateTime = null
        this.queryList()
      }


    },
    //关联关系清空
    isEmpty(val) {
      switch (val) {
        case 0:
          this.roadSectionNameList = []
          this.form.roadSectionId = ''
          break;
        case 1:
          this.roadSectionNameList = []
          this.currentRow.roadSectionId = ''
          break;


      }

    },

    //管养单位事件
    selectOrgHandel() {
      this.$forceUpdate()
      this.form.roadTreeId = null
      this.form.deptTreeId = this.deptTree.deptTreeId
      this.deptTreeId = this.deptTree.deptTreeId
      this.queryList()
    },
    // 公路布控点事件
    selectOrgHandel1() {
      this.$forceUpdate()
      this.form.roadTreeId = null
      this.form.deptTreeId = this.deptTreeId
      this.form.roadTreeId = this.roadTree.roadTreeId
      this.queryList()
    },
    // 查看大图
    previewImg(index, urls) {
      const urlList = JSON.parse(JSON.stringify(urls))
      urlList.map(x => {
        x.url = this.constUrl + x.url
        return x
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    //获取
    changeOptions(params) {
      this.roadId = params
    },
    //查询公路
    async getRoadSelectList() {
      const res = await getRoadSelectList()
      this.highWayNameList = res.data
    },
    //查询设备下拉id
    async getEquipamentoList() {
      const res = await getEquipamentoList()
      this.eQuipamentoList = res.data
    },
    //路段下拉
    async getRoadSectionList() {
      let res = await getRoadSectionSelectList({roadId: this.roadId})
      this.roadSectionNameList = res?.data || []
    },
    // 当前变化的节点
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 处理删除
    async handleDelete(row) {
      let res = await roleDelete({id: row.id})
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '数据已删除'
        })
        this.queryList()
      }
    },
    async queryList() {
      // 由于在前端进行过滤，所以name不能传到后端
      let res = await getEarlywarningList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      // 30天时间戳

    },
    async getHighwaySelectList() {
      let res = await getHighwaySelectList()
      this.highwaySelectList = res?.data || []
    },
    async getRoadSectionSelectList(highwayId) {
      if (highwayId == '' || highwayId == null) {
        return
      }
      this.form.roadSectionId = ''
      this.deviceSelectList = []
      this.form.deviceId = ''
      this.roadSectionSelectList = []
      let params = {
        highwayId: highwayId
      }
      let res = await getRoadSectionSelectList(params)
      this.roadSectionSelectList = res?.data || []
    },
    async getDeviceSelectList(roadSectionId) {
      if (roadSectionId == '' || roadSectionId == null) {
        return
      }
      let params = {
        roadSectionId: roadSectionId
      }
      let res = await getSensorSelectList(params)
      this.deviceSelectList = res?.data || []
    },
    async checkAlertInfo(id) {
      let params = {id: id}
      let res = await getPushRecord(params)
      if (res.data) {
        this.alertDetails.alertTime = res.data.alertTime;
        this.alertDetails.locationInfo = res.data.locationInfo;
        this.alertDetails.pushNumber = res.data.pushNumber;
        this.alertDetails.photoUrlList = res.data.photoUrl.split(',');
      }
      this.dialogVisible = true;
    },
    // 查询报告
    async checkReportInfo(id) {
      let params = {id: id}
      let res = await getAccidentReport(params)
      this.reportInfo = res?.data || []
      this.detailsVisible = true;
    },
    async updateStatus(row) {
      let params = {id: row.id}
      await updateStatus(params)
      this.jumpMenu(row)
    },
    //填写报告
    insertReportInfo(row) {
      this.photoList = {};
      this.reportInfo = {};
      this.reportInfo.highwayName = row.highwayName;
      this.reportInfo.highwayId = row.highwayId;
      this.reportInfo.roadSectionName = row.roadSectionName;
      this.reportInfo.roadSectionId = row.roadSectionId;
      this.reportInfo.earlyWarningId = row.id;
      this.reportInfo.arrangementId = row.arrangementId;
      this.reportInfo.roadId = row.roadId;
      this.roadId = row.roadId;
      this.getRoadSectionList()
      this.formVisible = true;
    },
    //校验表单
    validateForm() {
      this.$refs.reportInfo.validate((valid) => {
        if (valid) {
          this.submitData()
        }
      })
    },
    // 新增编辑提交数据
    async submitData() {
      let res = await add(this.reportInfo)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功'
        })
        this.formVisible = false
        this.queryList()
        return true
      }
    },
    //跳转到推送页面
    jumpMenu(row) {
      this.$router.push({name: 'photo-record', params: {earlyWarningId: row.id}})

    },
  },
  mounted() {
    // this.queryList()
    this.getRoadSelectList()
    // this.selectOrgHandel()
    this.queryDictList(['EnumGender','EnumNationality','EnumEthnic','EnumDrivingLicense','EnumCarType','EnumWeatherType'],
      ['genderList', 'personNationalityList', 'personEthnicList', 'personDrivingLicenseTypeList', 'carTypeList', 'weatherList'])
  },
  activated() {
    // this.queryList()
  }
}
</script>

<style lang="less" scoped>
  .tabForm {
    .el-form-item__label {
      width: 110px !important;
      text-align: center;
    }
  }

  .h3Title {
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #1990FE, rgba(25, 144, 254, 0.5), rgba(25, 144, 254, 0.2));
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    color: white;
    font-size: 20px;
    font-weight: 600
  }

  /deep/ .el-tree-node__label {
    font-weight: 600 !important;
    width: 120% !important;
    height: 40px;
    line-height: 40px;
  }

  /deep/ .el-tree-node__content:hover {
    font-weight: 600 !important;
    background: linear-gradient(to right, #1990FE, rgba(25, 144, 254, 0.8), rgba(25, 144, 254, 0.5), rgba(25, 144, 254, 0.3)) !important;
    color: white !important;
  }

  /deep/ .el-tree-node__content:hover {
    font-size: 120% !important;
  }

  /deep/ .el-tree-node__label:active {
    font-weight: 600 !important;
    color: white !important
  }

  /deep/ .el-tree-node__content {
    height: 40px;
    line-height: 40px;
    /*padding: 10px 0px !important;*/
    margin-left: 10px;
    border-radius: 0px 5px 5px 0px !important;
    margin: 2px 0;
    margin-left: 5px;
  }

  /deep/ .el-tree-node.is-current > .el-tree-node__content {
    border-radius: 0px 5px 5px 0px !important;
  }

  /deep/ .el-checkbox__inner {
    border: 1px solid #1990FE;
  }
</style>
